<!-- <template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style> -->
<template>
  <div class="app-container">
    <!-- 组件名 具有唯一性，不能与html中标签名一致-->
    <!-- 快捷链接 -->
    <Fu></Fu>
    <zhuti></zhuti>
    <HelloWorld></HelloWorld>
    <BaseGood></BaseGood>
    <XtxShortCut></XtxShortCut>
    <!-- 顶部导航 -->
    <XtxHeaderNav></XtxHeaderNav>
    <!-- 轮播区域 -->
    <XtxBanner></XtxBanner>
    <!-- 新鲜好物 -->
    <XtxNewGoods></XtxNewGoods>
    <!-- 热门品牌 -->
    <XtxHotBrand></XtxHotBrand>
    <!-- 最新专题 -->
    <XtxTopic></XtxTopic>
    <!-- 版权底部 -->
    <XtxFooter></XtxFooter>

    <!-- <tou></tou>
    <daohang></daohang>
    <zhuti></zhuti>
    <weibu></weibu> -->
  </div>
</template>
<script>
import XtxShortCut from './components/XtxShortCut.vue'
import XtxHeaderNav from './components/XtxHeaderNav.vue'
import XtxBanner from './components/XtxBanner.vue'
import XtxNewGoods from './components/XtxNewGoods.vue'
import XtxHotBrand from './components/XtxHotBrand.vue'
import XtxTopic from './components/XtxTopic.vue'
import XtxFooter from './components/XtxFooter.vue'
// import daohang from './components/daohang.vue'
// import tou from './components/tou.vue'
// import weibu from './components/weibu.vue'
// import zhuti from './components/zhuti.vue'
import Fu from './ssss/Fu.vue'
export default {
  name: 'QQ',
  components: {
    // daohang,
    // tou,
    // weibu,
    // zhuti
    XtxShortCut,
    XtxHeaderNav,
    XtxBanner,
    XtxNewGoods,
    XtxHotBrand,
    XtxTopic,
    XtxFooter,
    Fu
  },
  data () {
    return {
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
// .app-container {
//   display: flex;
//   flex-direction: column;
//   height: 100vh;
// }
// .box1 {
//   width: 200px;
//   background-color: red;
// }
// .box2 {
//   flex: 1;
//   display: flex;
//   .left {
//     width: 200px;
//     background-color: red;
//   }
//   .right {
//     flex: 1;
//     background-color: green;
//   }
// }
// .box3 {
//   width: 200px;
//   background-color: yellow;
// }
</style>
